* {
    font-family: '微软雅黑', serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 提示文本的颜色，也就是未输入之前的placeholder属性的颜色 */
::placeholder {
    color: #986ef4; /* 这里是为了方便看出来设置为紫色，通常为黑灰色，浅灰色一类 */
}

div[class^='box'] {
    width: 800px;
    margin: 20px 0 10px 20px;
}

h4 {
    line-height: 40px;
}

.box1-element input,
.box1-element select,
.box1-element textarea {
    width: 800px; /* 设置宽度 */
}

.box1 input,
.box1 select,
.box1 textarea {
    height: 30px; /* 设置高度 */
    padding: 0 15px; /* 设置内边距 */
    margin-bottom: 18px; /* 设置外边距 */
    border: 1px #33d182 solid;
    border-radius: 3px; /* 设置边框圆角 */
    font-size: 14px; /* 设置字体大小 */
    color: #e66ba0; /* 设置字体颜色为腮红粉色 */
    line-height: 30px; /* 设置行高 */
    background: rgba(51, 209, 130, 0.1); /* 设置背景颜色为浅绿色 */
}

.box1 input:focus,
.box1 textarea:focus {
    outline: 2px #33d182 solid; /* 光标聚焦input的时候，改变输入框的外边为绿色 */
    background: rgba(51, 209, 130, 0.3); /* 设置背景颜色为浅绿色 */
}

.box1 textarea {
    height: 180px; /* 设置高度 */
    resize: none; /* 在长文本框的右下角，禁止让用户拖动改变大小 */
}
.box1 button {
    width: 100px; /* 设置宽度 */
    height: 30px; /* 设置高度 */
    background: #33d182; /* 设置背景颜色为绿色 */
    border: none; /* 移除边框 */
    border-radius: 3px; /* 设置边框圆角 */
    color: #fff; /* 设置文字颜色为白色 */
    cursor: pointer; /* 设置鼠标样式为手型 */
}

.box1 button:hover {
    background: #25b974; /* 鼠标悬停在按钮上时，背景颜色变为深绿色 */
}

/* 错误提示样式 */
.error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}